<div class="flex flex-row flex-wrap justify-between md:justify-start">
  <button
    (click)="handleControlButton($event)"
    [disabled]="(connected$ | async) === false"
    id="btn-prev"
    mat-stroked-button
    title="Previous track"
  >
    <mat-icon>skip_previous</mat-icon>
  </button>
  <button
    (click)="handleControlButton($event)"
    [disabled]="(connected$ | async) === false"
    id="btn-seek-backwards"
    mat-stroked-button
    title="Jump backwards"
    *ngIf="displayJumpBtn"
  >
    <mat-icon>navigate_before</mat-icon>
  </button>
  <button
    (click)="handleControlButton($event)"
    [disabled]="(connected$ | async) === false"
    id="btn-stop"
    mat-stroked-button
    title="Stop"
  >
    <mat-icon>stop</mat-icon>
  </button>
  <button
    (click)="handleControlButton($event)"
    [disabled]="(connected$ | async) === false"
    *ngIf="(currentState | async) === 'play'"
    id="btn-pause"
    mat-stroked-button
    title="Pause"
  >
    <mat-icon>pause</mat-icon>
  </button>
  <button
    (click)="handleControlButton($event)"
    [disabled]="(connected$ | async) === false"
    *ngIf="(currentState | async) !== 'play'"
    id="btn-play"
    mat-stroked-button
    title="Play"
  >
    <mat-icon>play_arrow</mat-icon>
  </button>
  <button
    (click)="handleControlButton($event)"
    [disabled]="(connected$ | async) === false"
    id="btn-seek-forward"
    mat-stroked-button
    title="Jump forward"
    *ngIf="displayJumpBtn"
  >
    <mat-icon>navigate_next</mat-icon>
  </button>
  <button
    (click)="handleControlButton($event)"
    [disabled]="(connected$ | async) === false"
    id="btn-next"
    mat-stroked-button
    title="Next track"
  >
    <mat-icon>skip_next</mat-icon>
  </button>
  <button
    data-cy="clear-queue-btn"
    (click)="onClearQueue()"
    [disabled]="
      (queueTrackCount | async) === 0 || (connected$ | async) === false
    "
    class="valign-top clear-queue"
    mat-stroked-button
    title="Remove all items from the queue"
  >
    <mat-icon>delete</mat-icon>
  </button>
  <button
    (click)="onShowTrackInfo()"
    [disabled]="
      (currentState | async) === 'stop' || (connected$ | async) === false
    "
    *ngIf="displayInfoBtn | async"
    class="valign-top"
    mat-stroked-button
    title="Info about currently playing track"
  >
    <mat-icon>info</mat-icon>
  </button>
</div>
